<template>
  <el-card v-loading="bannerLoading" class="box-card" :class="['is-'+position]">
    <async-component ref="bannerCom" v-bind="previewData" :banner-data="bannerData" />
  </el-card>
</template>

<script>
import AsyncComponent from '@admin/packages/async-component/src/main.vue'
import {
  getDataSource,
  invokeMethod
} from '@admin/api/common'
export default {
  components: { AsyncComponent },
  props: {
    bannerSetting: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  data() {
    return {
      bannerData: {},
      bannerLoading: false
    }
  },
  computed: {
    previewData: function() {
      return this.bannerSetting.content
    },
    methodId: function() {
      return this.bannerSetting.methodId
    },
    position: function() {
      return this.bannerSetting.position || 'top'
    },
    // 方法 1:invoke  2:datasource
    methodType: function() {
      return this.bannerSetting.methodType || '1'
    }
  },
  mounted: function() {
    this.getBannerData()
  },
  methods: {
    getBannerData() {
      if (this.methodId) {
        if(this.methodType == '1'){
          const params = {
            methodId: this.methodId,
            data: {}
          }
          this.bannerLoading = true
          invokeMethod(params).then(res => {
            this.bannerData = res.data
          }).finally(() => {
            this.bannerLoading = false
          })
        }else{
          const param = {
            methodId: this.methodId,
            data: {}
          }
          this.bannerLoading = true
          getDataSource(param).then(res => {
            this.bannerData = res.data
          }).finally(() => {
            this.bannerLoading = false
          })
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.box-card{
  ::v-deep .el-card__body{
    padding: 10px 20px;
  }
  &.is-top{
    margin-bottom: 5px;
  }
  &.is-bottom{
    margin-top: 5px;
  }
}
</style>
